<template>
    <!-- 无缝滚动效果 -->
    <div class="marquee-wrap">
        <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
            <li class="list-item" v-for="(item, idx) in tableList" :key="idx" @click="chartClick(event)">
                <div class="first">
                    <span class="no">{{ item.num }}</span>{{ item.trName }}
                </div>
                <div class="last">{{ item.trNo }}</div>
            </li>
        </ul>
    </div>

</template>

<script>
export default {
    name: "marquee-up",
    props: {
        tableList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            animateUp: false,
            listData: [...this.tableList],
            timer: null
        }
    },
    watch: {
        tableList: {
            handler(newVal) {
                this.listData = newVal
            },
            deep: true
        }
    },
    mounted() {
        this.timer = setInterval(this.scrollAnimate, 1500);
    },
    methods: {
        scrollAnimate() {
            this.animateUp = true
            setTimeout(() => {
                this.listData.push(this.listData[0])
                this.listData.shift()
                this.animateUp = false
            }, 800)
        },
        chartClick(e) {
            this.$emit('chartClick', e)
        }
    },
    destroyed() {
        clearInterval(this.timer)
    }
};
</script>

<style scoped>
.marquee-wrap {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    overflow: hidden;

    .marquee-list {
        li {
            width: 100%;
            height: 10%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding: 0 20px;
            list-style: none;
            line-height: 40px;

            .list-item {
                border: 1px solid #153c81;
                margin-top: 10px;
                display: flex;
                justify-content: center;
                height: 32px;
                line-height: 32px;
                color: rgba($color: #ffffff, $alpha: 0.9);
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;

                .first {
                    position: relative;
                    width: 75%;

                    &::before {
                        position: absolute;
                        left: -42px;
                        top: 2px;
                        content: url('../assets/img/launch/inout/icon.png');
                    }

                    .no {
                        position: absolute;
                        left: -36px;
                        top: 0px;
                    }
                }
            }
        }
    }

    .animate-up {
        transition: all 0.8s ease-in-out;
        transform: translateY(-45px);
    }
}
</style>